<template>
  <div class="dialog" v-show="showDialog">
    <div
      class="content"
      :style="{ width: width + 'px', height: height + 'px' }"
    >
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'diaLogCpm',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 220
    }
  }
}
</script>

<style scoped>
/* STYLE */
.dialog {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(41, 37, 38, 0.212);
  z-index: 2;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -75%);
  background-color: rgb(255, 255, 255);
  border-radius: 25px;
  text-align: center;
}
.content span {
  display: block;
  padding: 70px 0 30px;
  font-size: 20px;
}
</style>
